<template>
    <div>
        <!-- 进出站管理-安检登记 -->
        <div class="container">
            <div class="content">
                <el-row>
                    <el-col :span="24">
                        <!--车辆信息S-->
                        <div class="left-choose lf">
                            <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf"><div class="lf title">车辆基本信息</div>
                        </div>
                        <!--车辆信息S-->
                    </el-col>

                    <el-form ref="form" label-width="80px">
                        <el-col :span="4">
                            <el-form-item label="车牌号" label-width="85px">
                                <el-autocomplete v-model="cardCodeTips" placeholder="" size="mini" :fetch-suggestions="querySearchCode"></el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-form-item label="车型" label-width="60px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="cardStyle" style='width: 110px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="核定载客" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="passenge" style='width: 120px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="技术等级" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="grade" style='width: 120px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="线路牌号" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="lineNum" style='width: 120px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="营运单位编号" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="unitNumbe" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="道路运输证号" label-width="68px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="roadNumbe" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="营运单位名称" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="operateName" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="审验有效日期" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="examination" style='width: 120px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="二级维护截止日期" label-width="80px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="deadline" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="承运人责仁险截止日期" label-width="90px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="dueDate" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>

                    </el-form>

                </el-row>

                <el-row>
                    <el-col :span="24">
                        <!--安检项目S-->
                        <div class="left-choose" style="overflow: hidden; margin-bottom: 10px;">
                            <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf"><div class="lf title">安检项目</div>
                        </div>
                        <!--安检项目E-->

                            <div class="items" v-for="(val,i) in allItems">
                                <div class="projectTitle">{{i}}</div>
                                <el-checkbox-group v-model="checkList">
                                    <el-checkbox class="items-box" v-for="list in val" :data-index='list.id?true:false' :v-model="'checked'+list.id" :label='list.item_name' size="mini" border>{{list.item_name}}</el-checkbox>
                                </el-checkbox-group>
                                <!--<el-checkbox v-for="list in val" :data-index='list.id' v-model="list.id" label="" size="mini" border>{{list.item_name}}</el-checkbox>-->
                               <!-- <el-checkbox  v-model="checked2" label="" size="mini" border>车内环境</el-checkbox>
                                <el-checkbox  v-model="checked3" label="" size="mini" border>视    镜</el-checkbox>
                                <el-checkbox  v-model="checked4" label="" size="mini" border>刮水器</el-checkbox>
                                <el-checkbox  v-model="checked5" label="" size="mini" border>发动机、水箱</el-checkbox>-->
                            </div>
                        <!--<div class="items">
                            <div class="projectTitle">制动系统</div>
                            <el-checkbox  v-model="checked6" label="" size="mini" border>气压表工作状况</el-checkbox>
                            <el-checkbox  v-model="checked7" label="" size="mini" border>制动管路密封性</el-checkbox>
                            <el-checkbox  v-model="checked8" label="" size="mini" border>制动系统自检</el-checkbox>
                            <el-checkbox  v-model="checked9" label="" size="mini" border>空气压缩机传动带</el-checkbox>
                        </div>

                        <div class="items">
                            <div class="projectTitle">转向系统</div>
                            <el-checkbox  v-model="checked10" label="" size="mini" border>转向机构及连接</el-checkbox>
                        </div>

                        <div class="items">
                            <div class="projectTitle">传动系统</div>
                            <el-checkbox  v-model="checked11" label="" size="mini" border>传动机构及连接</el-checkbox>
                            <el-checkbox  v-model="checked12" label="" size="mini" border>自动变速液力缓速器密封性</el-checkbox>
                        </div>

                        <div class="items">
                            <div class="projectTitle">照明、信号指示灯</div>
                            <el-checkbox  v-model="checked13" label="" size="mini" border>前照灯</el-checkbox>
                            <el-checkbox  v-model="checked14" label="" size="mini" border>信号指示灯</el-checkbox>
                        </div>

                        <div class="items">
                            <div class="projectTitle">轮胎</div>
                            <el-checkbox  v-model="checked15" label="" size="mini" border>轮胎外观</el-checkbox>
                            <el-checkbox  v-model="checked16" label="" size="mini" border>轮胎花纹深度</el-checkbox>
                            <el-checkbox  v-model="checked17" label="" size="mini" border>轮胎规格和花纹</el-checkbox>
                            <el-checkbox  v-model="checked18" label="" size="mini" border>轮胎气压</el-checkbox>
                            <el-checkbox  v-model="checked19" label="" size="mini" border>轮胎爆栓、螺母</el-checkbox>
                        </div>

                        <div class="items">
                            <div class="projectTitle">悬架系统</div>
                            <el-checkbox  v-model="checked20" label="" size="mini" border>弹性元件</el-checkbox>
                            <el-checkbox  v-model="checked21" label="" size="mini" border>U型螺栓螺母</el-checkbox>
                            <el-checkbox  v-model="checked22" label="" size="mini" border>吊耳销（套）、锁销</el-checkbox>
                        </div>

                        <div class="items">
                            <div class="projectTitle">安全措施</div>
                            <el-checkbox  v-model="checked23" label="" size="mini" border>车门应急开关</el-checkbox>
                            <el-checkbox  v-model="checked24" label="" size="mini" border>安全顶窗</el-checkbox>
                            <el-checkbox  v-model="checked25" label="" size="mini" border>安全锤</el-checkbox>
                            <el-checkbox  v-model="checked26" label="" size="mini" border>灭火器</el-checkbox>
                        </div>

                        <div class="items">
                            <div class="projectTitle">摄像头</div>
                            <el-checkbox  v-model="checked27" label="" size="mini" border>摄像头的拍摄方向</el-checkbox>
                        </div>

                        <div class="items">
                            <div class="projectTitle">全球卫星定位汽车行驶记录仪</div>
                            <el-checkbox  v-model="checked28" label="" size="mini" border>终端状态完好，显示正常</el-checkbox>
                        </div>-->

                        <div class="security-box">
                            <div class="security-results lf">安检结果</div>
                            <div v-if="qualifiedF" @click="qualifiedTrue" class="qualified lf">总体合格</div>
                            <div v-if="qualifiedL" @click="qualifiedFalse" class="qualified noqualified lf">总体不合格</div>
                            <button class="submit-results rf" @click="submitBtn">提交安检结果</button>
                        </div>

                    </el-col>
                </el-row>
            </div>

        </div>

        <!--提交安检结果 S-->
        <div class="submitModal" v-if="showModal">
            <div class="submitModal-box">
                <div class="submitModal-title">
                    <div class="left-choose lf">
                        <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf"><div class="lf title">提交安检结果</div>
                    </div>
                </div>

                <avue-form ref="form" v-model="objModal" :option="option" class="yz-form"></avue-form>

                <button class="cancel-btn rf" @click="cancelModal"><i class="cancel-icon lf"></i><span class="lf">取消</span></button>
                <button class="sure-btn rf" @click="sureBtn"><i class="lf"></i><span class="lf">确定</span></button>
            </div>
        </div>
        <!--提交安检结果 E-->
    </div>
</template>

<script>
    import "../../assets/js/jquery.js";
    // import TableData from "../../components/common/tableData";
    // import qs from "qs";

    const DIC = {
        VAILD: [],
    };
    export default {
        data: function(){
            return {
                checked1: false,
                checked2: false,
                checked3: false,
                checked4: false,
                checked5: false,
                checked6: false,
                checked7: false,
                checked8: false,
                checked9: false,
                checked10: false,
                checked11: false,
                checked12: false,
                checked13: false,
                checked14: false,
                checked15: false,
                checked16: false,
                checked17: false,
                checked18: false,
                checked19: false,
                checked20: false,
                checked21: false,
                checked22: false,
                checked23: false,
                checked24: false,
                checked25: false,
                checked26: false,
                checked27: false,
                checked28: false,
                qualifiedF: false,
                qualifiedL: false,
                showModal: false,
                cardCodeTips: "",
                input1: "",
                cardStyle: "",
                passenge: "",
                grade: "",
                lineNum: "",
                unitNumbe: "",
                roadNumbe: "",
                operateName: "",
                examination: "",
                deadline: "",
                dueDate: "",
                objModal: {},
                allItems: [],
                waiguan: [],
                checkList: [],
                option:{
                    dicData:DIC,
                    column: [
                        {
                            label: "安检单号",
                            prop: "an_jian_dan_hao",
                        },
                        {
                            label: "安检时间",
                            prop: "an_jian_shi_jian",
                            type: "date"
                        },
                        {
                            label: "安检人员1",
                            prop: "an_jian_ren_yuan1",
                            type: "select",
                            dicData: 'VAILD'
                        },
                        {
                            label: "安检人员2",
                            prop: "an_jian_ren_yuan2",
                            type: "select",
                            dicData: 'VAILD'
                        },
                        {
                            label: "备注",
                            prop: "remarks",
                            span:24
                        },
                    ]
                },
            }
        },
        methods:{
            loadAll() {
                return [ ];
            },
            //获取车牌
            searchCode(){
                this.postRequest("/sch/data/bus_vehicle/listWithSpell")
                    .then(target => {
                        // console.log(target.data);
                        var tag = target.data;
                        for(var i=0;i<tag.length;i++){
                            // console.log(tag[i].vehi_no);
                            // console.log(this.loadAll.value);
                            this.restaurants.push({"value":tag[i].vehi_no});
                        }
                    });
            },
            //获取焦点车牌号自动下拉提示
            querySearchCode(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            getCardMess(){
                this.getRequest("/sch/data/bus_vehicle/info?vehino="+this.cardCodeTips)
                    .then(target => {
                        console.log(target);
                        // console.log(target.data);
                        var tag = target.data;
                        this.cardStyle = tag.che_liang_lei_xing;//车型
                        this.passenge = tag.all_seat;//核定载位
                        this.grade = tag.ji_shu_deng_ji;//技术等级
                        this.lineNum = tag.xlbzph;//线路牌号
                        this.unitNumbe = '后台暂时没返回';//营运单位编号
                        this.roadNumbe = tag.dao_lu_yun_shu_zheng_hao;//道路运输证号
                        this.operateName = tag.cust_name;//营运单位名称
                        this.examination = tag.shen_yan_you_xiao_qi;//审验有效日期
                        this.deadline = tag.level2ndmaintenanceenddate;//二级维护截止日期
                        this.dueDate = tag.liabilityinsuranceenddate;//承运人责仁险截止日期
                    });
            },
            cancelModal(){//点击弹窗的取消 关闭弹窗
                this.showModal = false;
            },
            submitBtn(){//点击提交安检结果 弹出弹窗
                if(this.cardCodeTips === ''){
                    this.$message.error('请选择车牌号')
                }else{
                    this.showModal = true;
                    // console.log(this.checkList);
                    this.postRequest("/sys/user/listWithSpell")
                        .then(target => {
                            // console.log(target);
                            var tag = target.data;
                            DIC.VAILD = [ ];
                            for(var i=0;i<tag.length;i++){
                                DIC.VAILD.push({
                                    label:tag[i].name,
                                    value: tag[i].name
                                });
                            }
                        })
                }
            },
            sureBtn(){//点击弹窗确定   //测试数据
                if(this.objModal.an_jian_dan_hao === ''){
                    this.$message.error("请填写安检单号");
                }else if(this.objModal.an_jian_shi_jian === ''){
                    this.$message.error("请填写安检时间");
                }else{
                    // this.$http.get('/securitycheck/vehi/doSecurityCheck?vehino=%E7%B2%A4A12345&anjianno=%E5%AE%89%E6%A3%80%E5%8D%95%E5%8F%B72019&anjiantime=2018-08-23+10%3A57%3A27&remarks=%E5%A4%87%E6%B3%A8%E6%97%A0&cr=1111111111111111111111111111&is_pass=0&anjianOper_1=hieo1&anjianOper_2=hieo2')
                    this.getRequest('/securitycheck/vehi/doSecurityCheck?vehino='+this.cardCodeTips+'&anjianno='+this.objModal.an_jian_dan_hao+'&anjiantime='+this.dateToString(this.objModal.an_jian_shi_jian)+'&remarks='+this.objModal.remarks+'&cr=1111111111111111111111111111&is_pass=0&anjianOper_1='+this.objModal.an_jian_ren_yuan1+'&anjianOper_2='+this.objModal.an_jian_ren_yuan2+'')
                        .then(target => {
                            console.log(target);
                            this.showModal = false;
                            if(target.data[1].is_pass){
                                this.qualifiedF = true;
                                this.qualifiedL = false;
                            }else{
                                this.qualifiedL = true;
                                this.qualifiedF = false;
                            }
                        })
                }
            },
            getSecuritycheckItem(){//获取安检项目列表
                this.postRequest("/securitycheck/item/vehi")
                    .then(target => {
                        console.log(target.data);
                        var tag = target.data.外观;
                        this.allItems = target.data;
                        for(var i=0;i<tag.length;i++){
                            // console.log(tag[i].item_name);
                            this.waiguan.push(tag[i])
                        }
                    })
            },
            qualifiedTrue(){
                this.qualifiedF = false;
                this.qualifiedL = true;
            },
            qualifiedFalse(){
                this.qualifiedF = true;
                this.qualifiedL = false;
            },
        },
        computed:{},
        created(){this.getSecuritycheckItem();},
        watch:{
            cardCodeTips(){this.getCardMess();}//监听车牌号的变化
        },
        mounted() {
            this.searchCode();
            this.$emit("sendActive","4-1");
            this.restaurants = this.loadAll();
            /*改样式  S*/
            $(function() {
                $('.content .el-form-item__label').each(function() { //遍历相同样式名的元素
                    var h = $(this).html().length;
                    if(h>5){
                        this.style.lineHeight = "20px";
                        this.style.textAlign = "left";
                    }
                });
            });
            /*改样式  E*/
            // this.$emit("sendTag",2);

        }
    }
</script>
<style scoped src="../../assets/css/inoutManage/safeLogin.css">
</style>
<style>
    .content .el-checkbox__inner{
        display: none !important;
    }
     .content .el-checkbox__input.is-checked+.el-checkbox__label{
        color: #009688  !important;
    }
     .content .el-checkbox.is-bordered.is-checked{
        border-color: #009688 !important;
    }
     .content .el-checkbox.is-bordered{
        margin-right: 15px;
    }
</style>
